<template lang="pug">
div(v-if='question')
  h3 {{ question.title }}
  div 提问者： {{ question.owner.name }}
  div 提问时间： {{ createTime }}
  div 状态：{{ getStatus(question.status) }}

  div(style='margin-top: 16px; padding-top: 16px; border-top: 1px solid #ccc;')
    div(v-show='question.answerCount')
      h3(slot='title') 回答
      Card(v-for='answer in answers', key='answer.id', style='margin-top: 16px')
        div(slot='title')
          small(style='color: #ccc') \#{{ answer.id }} &nbsp;
          span {{ answer.timeFormatted }} {{ answer.owner.name }} 答：
          div.pull-right
            router-link(:to='`/questions/${question.id}/answers/${answer.id}/edit`') 编辑
            //- | &nbsp; &nbsp;
            //- a 删除
        template(v-if='answer.body')
          div(v-html='answer.body')
        template(v-if='answer.media.permanentUrl')
          audio(:src='answer.media.permanentUrl')
    //- div 答案。。。
    Card(v-show='!question.answerCount')
      div.text-center
        div 目前没有答案
        router-link(:to='`/questions/${question.id}/answers/add`') 添加答案

</template>

<script>
import questionApi from '@/apis/question'
import {
  STATUS_NORMAL,
  STATUS_RECALLED,
  STATUS_ANSWERED,
  STATUS_DECLINE,
  STATUS_TRANSFERRED,
  STATUS_LOCKED,
  STATUS_EXPIRED
} from '@/libs/const'

export default {
  // beforeRouteEnter (to, from, next) {
  //   questionApi.getQuestion(to.params.id)
  //     .then(data => next(vm => {
  //       vm.question = data.data
  //     }))
  // },
  data () {
    return {
      question: null,
      answers: null
    }
  },
  computed: {
    createTime () {
      let date = new Date(this.question.created * 1000)
      return [date.getFullYear(), 1 + date.getMonth(), date.getUTCDate()].join('-')
      // return date
    }
  },
  mounted () {
    questionApi.getQuestion(this.$route.params.id)
      .then(data => {
        this.question = data.data
      })
    questionApi.getQuestionAnswers(this.$route.params.id)
      .then(data => {
        this.answers = data.data
      })
  },
  methods: {
    getStatus (code) {
      const labels = {}
      labels[STATUS_NORMAL] = '待回答'
      labels[STATUS_RECALLED] = '撤回'
      labels[STATUS_ANSWERED] = '已回答'
      labels[STATUS_DECLINE] = '邀请被拒绝'
      labels[STATUS_TRANSFERRED] = '已转交'
      labels[STATUS_LOCKED] = '锁定'
      labels[STATUS_EXPIRED] = '邀请过期'
      return labels[code]
    }
  }
}
</script>
